.rcontrols {
  text-align: center;
  width: 100%;

  p {
    margin: 0;
  }

  .disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .ddloader {
    margin: 20px auto 10px auto;
  }

  .suggestion,
  .pending,
  .negotiation {
    padding: 0.5em 3%;
    background: $c-bg-zebra;
    border: $border;
    border-width: 0 1px;
  }

  .suggestion {
    @extend %flex-center;

    justify-content: space-around;

    p {
      width: 100%;
    }

    .button {
      margin: 0.5em 0 0 0;
    }
  }

  .pending {
    @extend %flex-center-nowrap;

    p {
      flex: 3 1;
      margin-right: 7px;
    }

    .button {
      flex: 1 1;
    }
  }

  @keyframes flash-once {
    from {
      background: $c-accent;
      color: $c-accent-over;
    }

    to {
      background: $c-bg-zebra;
      color: $c-font;
    }
  }

  .negotiation {
    @extend %flex-center-nowrap;
    animation: flash-once 1s ease-in;

    padding: 1px;

    p {
      flex: 3 1 auto;
    }

    a {
      flex: 1 0 3rem;
      font-size: 1.5em;
      line-height: 3em;
      background: $c-bg-box;
    }

    .accept {
      color: $c-good;
      margin-right: 1px;
    }

    .decline {
      color: $c-bad;
    }

    a:hover {
      color: #fff;
      background: $c-good;
    }

    a.decline:hover {
      background: $c-bad;
    }

    @include breakpoint($mq-col1) {
      a {
        line-height: 1.6em;
        flex: 0 0 2.5rem;
        padding: 0 1.2em;
      }

      padding: 3px;
    }
  }

  .glowing:hover {
    animation: none;
  }

  .follow-up {
    @extend %flex-column;

    border-bottom: $border;
    position: relative;

    /* for rematch-decline */
    .fbt {
      padding: 12px 0;
      margin: 1px 1px 0 1px;
    }

    > .fbt:first-child {
      margin-top: 0;
    }

    .fbt.strong {
      padding: 2em 0;
      font-size: 1.2em;
    }

    .weak {
      font-weight: normal;
      padding: 6px 0;
    }

    .weak::before {
      opacity: 0.7;
    }

    form .fbt {
      width: 100%;
    }

    .spinner {
      width: 40px;
      height: 40px;
    }

    @include breakpoint($mq-col1) {
      margin-top: $block-gap;
    }
  }

  .analysis {
    display: none;

    @include breakpoint($mq-col1) {
      display: block;
      margin-left: 2em;
    }
  }

  .rematch {
    &.fbt {
      @extend %metal;

      font-size: 1.2em;
      height: 6rem;

      @include transition;
    }

    &.me {
      background: mix($c-primary, $c-bg-box, 80%);
    }

    @keyframes rubber-band {
      from {
        transform: scale3d(1, 1, 1);
      }

      6% {
        transform: scale3d(1.25, 0.75, 1);
      }

      8% {
        transform: scale3d(0.75, 1.25, 1);
      }

      10% {
        transform: scale3d(1.15, 0.85, 1);
      }

      13% {
        transform: scale3d(0.95, 1.05, 1);
      }

      15% {
        transform: scale3d(1.05, 0.95, 1);
      }

      20% {
        transform: scale3d(1, 1, 1);
      }
    }

    @keyframes button-glowing {
      0% {
        opacity: 0;
      }
      60% {
        opacity: 0.2;
      }
      85% {
        opacity: 0;
      }
    }

    &.glowing {
      position: relative;
      animation: none;
      color: $c-font-clear;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        background: $c-primary;
        opacity: 0;
        animation: button-glowing 2s ease-in-out infinite;
      }

      span {
        display: block;
        animation: rubber-band 5s infinite;
      }
    }

    &.fbt:not(.disabled):hover {
      background: mix($c-link, $c-bg-box, 70%);
      color: #fff;
      animation: none;
    }

    &-decline {
      @extend %flex-center-nowrap, %box-radius-right, %box-shadow;

      background: $c-bg-zebra;
      justify-content: center;
      position: absolute;
      top: 0;
      right: -25px;
      width: 25px;
      height: 6rem;
      border: 0;
      opacity: 0.7;
      background: mix($c-bad, $c-bg-box, 50%);

      @include transition;

      display: none;

      @include breakpoint($mq-col2) {
        display: block;
      }

      &:hover {
        background: $c-bad;
        color: $c-bad-over;
        right: -36px;
        width: 35px;
      }
    }
  }
}
